<template>
  <div class="app-module">
    <div class="left-content" v-show="pageState == 0">
      <Transition name="slide-left" mode="out-in">
        <div class="box-left" v-if="pageState == 0">
          <GovernanceSituationCard></GovernanceSituationCard>
          <PlanPreparationCard></PlanPreparationCard>
          <FundChangesCard></FundChangesCard>
        </div>
        <div class="box-left" v-else-if="pageState == 1"></div>
      </Transition>
    </div>
    <div class="center">
      <div class="center-top">
        <div class="center-top-left">
          <MineSelector @toHome="onToHome" ref="mineSelectorRef"></MineSelector>
          <FunctionBar v-if="pageState == 1" :actions="actions" @change="onActionChange" ref="FunctionBarRef"></FunctionBar>
        </div>
      </div>
    </div>
    <div class="right-content">
      <Transition name="slide-right" mode="out-in">
        <div class="box-right" v-if="pageState == 0">
          <MonitoringBuildingCard></MonitoringBuildingCard>
          <AreaCamerasCard></AreaCamerasCard>
          <EcologicalWarningCard></EcologicalWarningCard>
        </div>
      </Transition>
      <Transition name="slide-right" mode="out-in">
        <div class="box-right" v-if="actionsKey === 'engineering'">
        <RestorationProject @close="onCardClose"></RestorationProject>
        </div>
      </Transition>
      <Transition name="slide-right" mode="out-in">
        <div class="box-right" v-if="actionsKey === 'report'">
        <EnvironmentReport @close="onCardClose"></EnvironmentReport>
        </div>
      </Transition>
      <Transition name="slide-right" mode="out-in">
        <div class="box-right" v-if="actionsKey === 'monitor'">
        <EcologicalMonitoring @close="onCardClose"></EcologicalMonitoring>
        </div>
      </Transition>
      <Transition name="slide-right" mode="out-in">
        <div class="box-right" v-if="actionsKey === 'warning'">
        <EcologicalWarning @close="onCardClose"></EcologicalWarning>
        </div>
      </Transition>
      <Transition name="slide-right" mode="out-in">
        <div class="box-right" v-if="actionsKey === 'juanlian'">
        <CurtainComparison @close="onCardClose"></CurtainComparison>
        </div>
      </Transition>
    </div>
    <div class="bottom-content" v-if="bottomShow">
      <div class="bottom-content-title">{{ contentTitle + '历史数据' }}</div>
      <div></div>
    </div>
  </div>
</template>

<script setup>
import AreaCamerasCard from "./modules/AreaCamerasCard.vue";
import EcologicalWarningCard from "./modules/EcologicalWarningCard.vue";
import FundChangesCard from "./modules/FundChangesCard.vue";
import GovernanceSituationCard from "./modules/GovernanceSituationCard.vue";
import MonitoringBuildingCard from "./modules/MonitoringBuildingCard.vue";
import PlanPreparationCard from "./modules/PlanPreparationCard.vue";
import MineSelector from "@/components/MineSelector/MineSelector.vue";
import FunctionBar from "@/components/FunctionBar/FunctionBar.vue";
import { emitter } from "@/utils/events";
import useOnemapStore from "@/store/modules/onemap";

import RestorationProject from "./modules/RestorationProject.vue";
import EnvironmentReport from "./modules/EnvironmentReport.vue";
import EcologicalMonitoring from "./modules/EcologicalMonitoring.vue";
import EcologicalWarning from "./modules/EcologicalWarning.vue";
import CurtainComparison from "./modules/CurtainComparison.vue";

const { proxy } = getCurrentInstance();
const pageState = ref(0);
const actions = [
  {
    id: 1,
    key: "engineering",
    label: "修复工程",
    icon: "icon-engineering.svg",
  },
  {
    id: 2,
    key: "report",
    label: "环境报告",
    icon: "icon-report.svg",
  },
  {
    id: 3,
    key: "monitor",
    label: "环境监测",
    icon: "icon-monitor.svg",
  },
  {
    id: 4,
    key: "warning",
    label: "生态告警",
    badge: 3,
    icon: "icon-warning.svg",
  },
  {
    id: 5,
    key: "land",
    label: "土地利用",
    icon: "icon-land.svg",
  },
  {
    id: 6,
    key: "img",
    label: "历史影像",
    icon: "icon-img.svg",
  },
  {
    id: 7,
    key: "juanlian",
    label: "卷帘对比",
    icon: "icon-juanlian.svg",
  },
];

const actionsKey = ref(null);
const bottomShow = ref(false);
const contentTitle = ref('');

watch(
  () => useOnemapStore().nodeLevel,
  (newValue, oldValue) => {
    if (newValue < 4) {
      pageState.value = 0;
    } else {
      pageState.value = 1;
    }
  }
);

const init = () => {
  const nodeLevel = useOnemapStore().nodeLevel;
  if (nodeLevel === 4) {
    pageState.value = 1;
  } else {
    pageState.value = 0;
  }
};

const onToHome = () => {
  pageState.value = 0;
  proxy.$refs["FunctionBarRef"]?.reset();
  // 跳转到用户的区划结点
  proxy.$refs["mineSelectorRef"].toTopDistrict();

};
 
const onCardClose = () => {
  proxy.$refs["FunctionBarRef"]?.reset();
};
const onActionChange = (key) => {
  console.log("选中了", key);
  actionsKey.value = key;
  
  // 当点击历史影像时显示底部面板
  if (key === 'img') {
    bottomShow.value = true;
    contentTitle.value = '历史影像';
  } else {
    bottomShow.value = false;
    contentTitle.value = '';
  }
};
// 页面被激活
onActivated(() => {
  proxy.$forceUpdate();
});

init();
</script>

<style lang="scss" scoped>
.bottom-content {
  width: 900px;
  height: 140px;
  background-image: url('@/assets/images/green/historyBg.png');
  background-size: 100% 100%;
  position: absolute;
  left: 50%;
  bottom: 0px;
  transform: translate(-50%, -20%);
  pointer-events: all;

  .bottom-content-title {
    height: 28px;
    width: 300px;
    line-height: 30px;
    font-size: 20px;
    font-family: PangMen;
    color: #eef1fa;
    margin-left: 60px;
  }
}
</style>
